<template name="goodEvaluate">
	<view class="goodEval" >
		<view class="evaluateBox">
			<view class="titleBox">
				<text class="title">{{evaluateList.length>0?'评价':'暂无评价'}}</text>
				<text class="haoping" @tap="toPage" :data-gid="cid" :data-gname="cname" data-url="goodEvaluate" v-if="evaluateList.length>0">全部评价</text>
				<text class="iconfont icon-right" @tap="toPage" :data-gid="cid" :data-gname="cname" data-url="goodEvaluate" v-if="evaluateList.length>0"></text>
			</view>
			<scroll-view scroll-x="true" style="margin-top: 30upx;" v-if="evaluateList.length>0">
				<view class="evaluateList">
					<view class="evaluateItem" v-for="(item,index) in evaluateList" :key="index">
						<view class="infoBox">
							<view class="userInfo">
								<image :src="item.img?item.img:'../../static/userPic.png'"></image>
								<text class="userNick">{{item.type==0?item.author:(item.author.substr(0,1)+'**'+item.author.substr(-1,1))}}</text>
							</view>
							<view class="evaluateText">
								<text class="xinde">心得</text>
								<text>{{item.content?item.content:'此用户没有填写评论!'}}</text>
							</view>
						</view>
						<view class="imgBox" v-if=" item.resList&& item.resList.length>0">
							<image :src="item.resList[0].url" mode=""></image>
							<text class="imgCount">{{item.resList.length}}张</text>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goodEvaluate', //组件名称
		// 传递参数
		props: {
			cid:{
				type:Number,
				default:0
			},
			cname:{
				type:String,
				default:''
			}
		},
		// 组件参数
		data() {
			return {
				evaluateList:[]
			}
		},
		// 组件方法
		methods: {
			getData() {
				this.$store.dispatch("apiGetNewElt",{
					courseId:this.cid,
					page_size:3
				}).then(res=>{
					this.evaluateList=res.data.data.items
				})
			}
		},
		
		created() {
			setTimeout(()=>{
				this.getData()
			},500)
			
		}
	}
</script>

<style lang="less" scoped>
	.goodEval {
		background-color: #FFFFFF;
		padding: 30upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
	}
	.evaluateBox{
		display: flex;
		flex-direction: column;
		.titleBox{
			display: flex;
			align-items: baseline;
			// margin-bottom: 30upx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
				flex: 1;
			}
			.haoping{
				font-size: 26rpx;
				font-weight: bold;
				color: #595959;
			}
			.iconfont{
				color: #595959;
				margin-left: 15upx;
				font-size: 28upx;
			}
		}
		.evaluateList{
			
			display: flex;
			width: 1492upx;
			flex-wrap: nowrap;
			.evaluateItem{
				width: 480upx;
				display: flex;
				align-items: flex-start;
				border-radius: 14rpx;
				border: solid 2rpx #cfcfcf;
				padding: 14upx;
				flex-shrink: 0;
				margin-right: 26upx;
				.infoBox{
					display: flex;
					flex-direction: column;
					overflow: hidden;
					flex-grow: 1;
					height: 190upx;
					.userInfo{
						display: flex;
						align-items: center;
						>image{
							width: 60upx;
							height: 60upx;
							border-radius: 50%;
							margin-right: 20upx;
						}
						.userNick{
							font-size: 22rpx;
							color: #838890;
						}
					}
					.evaluateText{
						margin-top: 20upx;
						line-height: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text{
							font-size: 24rpx;
							color: #202932;
						}
						.xinde{
							display: inline-block;
							font-size: 21rpx;
							color: #ff2b49;
							border: 2upx solid #ff2b49;
							line-height: 26upx;
							padding: 0 10upx;
							margin-right: 20upx;
						}
					}
				}
				.imgBox{
					display: flex;
					align-items: stretch;
					justify-content: center;
					width: 190upx;
					height: 190upx;
					position: relative;
					image{
						width: 190upx;
						height: 190upx;
						border-radius: 10upx;
					}
					.imgCount{
						position: absolute;
						z-index: 1;
						background-color: rgba(0,0,0,0.5);
						color: #FFFFFF;
						bottom: 10upx;
						right: 10upx;
						display: block;
						padding: 0 16upx;
						height: 40upx;
						line-height: 40upx;
						font-size: 20upx;
						border-radius: 8upx;
					}
				}
			}
		}
	}
</style>
